import HeaderBar from "./HeaderBar";
import HeaderBanner from "./HeaderBanner";
import HeaderChannel from "./HeaderChannel";
import { useEffect, useState } from "react";

import "./header.css";

function LiliHeader({ loginAction }) {
  const [barHeight, setBarHeight] = useState(0);
  const [isOver, setIsOver] = useState(false);

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);

    // return window.removeEventListener("scroll", handleScroll);
  })

  useEffect(() => {
    setBarHeight(document.querySelector(".lili-header").clientHeight);
  }, [])

  const handleScroll = (e) => {
    let scrollTop = document.documentElement.scrollTop;
    if (scrollTop >= barHeight) {
      setIsOver(true);
    } else {
      setIsOver(false);
    }
  }

  return (
    <div className="lili-big-header">
      <HeaderBar loginAction={loginAction} subClass={isOver ? " scroll" : ""} />
      <HeaderBanner />
      <HeaderChannel />
    </div>
  )
}

export default LiliHeader;